<template>
  <div class="app-container">
    <div>
      <el-button  class="filter-item" size="small" type="primary" plain icon="el-icon-plus" @click="handleCreate">
      添加
    </el-button>
    </div>
    <br/>
    <el-table
      v-loading="listLoading"
      :data="list"
      style="width: 60%;"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="角色名称">
        <template slot-scope="scope">
          {{ scope.row.roleName }}
        </template>
      </el-table-column>

      <el-table-column label="Actions" align="center" width="300" class-name="small-padding fixed-width">
        <template slot-scope="{row}">

          <el-button type="primary" icon="el-icon-edit" title="编辑" size="mini" @click="handleUpdate(row)">
          </el-button>
          <el-button type="danger" icon="el-icon-delete" title="删除" size="mini" @click="handleDelete(row)">
          </el-button>

          <el-button type="primary" size="mini" style="width: 100px;" @click="handleAssignMenu(row)">
            权限分配
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="70%">
      <auth-list ref="authList" :role="role" :closeDialog="closeDialog"/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog()">
          取消
        </el-button>
        <el-button type="primary" @click="saveAuths()">
          保存
        </el-button>
      </div>
    </el-dialog>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible1" :close-on-click-modal="false">
      <form-details ref="formDetails" :row="row" :isModule="true" @createResult="createResult" @updateResult="updateResult"/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          保存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList } from './api/role'
import AuthList from './auth-rolelist'
import FormDetails from './my-role-form-details'
import {deleteApi} from './api/api'

export default {
  name: 'RoleList',
  components: {
    FormDetails,
    AuthList
  },
  data() {
    return {
      list: null,
      listLoading: true,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '新增'
      },
      role: {},
      row:{}
    }
  },
  computed: {
    dialogTitle: function() {
      return '权限分配 / ' + this.role.roleName
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList().then(result => {
        this.list = result.list
        this.listLoading = false
      })
    },
    handleAssignMenu(row) {
      this.dialogFormVisible = true
      this.role = Object.assign({}, row) // copy obj
    },
    saveAuths() {
      this.$refs.authList.saveAuths()
    },
    closeDialog() {
      this.$refs.authList.resetChecked()
      this.dialogFormVisible = false
    },
    // 添加操作 start
    handleCreate() {
      this.dialogStatus = 'create'
      this.dialogFormVisible1 = true
      // 消除上次出现的验证信息
      this.$nextTick(() => {
        this.$refs['formDetails'].clearValidate()
        this.$refs['formDetails'].resetTemp()
        this.$refs['formDetails'].defaultTemp()
      })
    },
    // 调用子组件操作数据
    createData() {
      this.$refs['formDetails'].createData()
    },
    // 子组件操作成功，回调此方法，关闭弹框、刷新
    createResult() {
      this.dialogFormVisible1 = false
      this.fetchData()
    },
    // 编辑操作 start
    handleUpdate(row) {
      this.row = Object.assign({}, row) // copy obj
      this.dialogStatus = 'update'
      this.dialogFormVisible1 = true
      // 消除上次出现的验证信息
      this.$nextTick(() => {
        this.$refs['formDetails'].clearValidate()
      })
    },
    // 调用子组件操作数据
    updateData() {
      this.$refs['formDetails'].updateData()
    },
    // 子组件操作成功，回调此方法，关闭弹框、刷新
    updateResult() {
      this.dialogFormVisible1 = false
      this.fetchData()
    },
    // 删除操作
    handleDelete(row) {
      this.$confirm('确认删除吗？')
        .then(_ => {
          // delete api
          deleteApi({ id: '' + row.id }).then((r) => {
            this.notify(r)
            if (r.success) {
              this.fetchData()
            }
          })
          // end
        })
        .catch(_ => {})
    },

  }
}
</script>
